<template>
	<el-container>
		<el-main class="nopadding" v-loading="loading">
			<div style="width:1600px;height:100%;">
				<ta-designer ref="designer" :config="config">
					<template #handle>
						<el-button icon="Promotion" type="success" size="small" @click="handleSave" plain>保存</el-button>
					</template>
				</ta-designer>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'activityV2.pageEdit',
		components: {

		},
		mounted() {
			this.getData();
		},
		data() {
			// https://view.form-create.com/hidden-item
			return {
				loading: true,
				form: {
					id: "",
					activity_page_options: [],
					activity_page_rules: [],
					activity_page_preview: null
				}
			};
		},
		methods: {
			getData() {
				var {
					id
				} = this.$route.query;
				if (id) {
					this.loading = true;
					this.$API.system.activityV2Page.show.get({
						id: id
					}).then(res => {
						this.form = res.data;
						this.$refs.designer.setRule(this.form.activity_page_rules);
						this.$refs.designer.setOption({
							...this.form.activity_page_options,
						});
					}).finally(() => {
						this.loading = false
					})
				}
			},
			handleSave() {
				if (this.loading == true) return;

				this.loading = true;

				this.form.activity_page_options = this.$refs.designer.getOption();
				this.form.activity_page_rules = this.$refs.designer.getRule();

				this.$refs.designer.domToPng((dataUrl) => {
					this.form.activity_page_preview = dataUrl;
					this.$API.system.activityV2Page.update.post(this.form).then(res => {
						if (res.code == 0) {
							this.$message.success("保存成功")
						} else {
							this.$alert(res.msg, "提示", {
								type: 'error'
							})
						}
					}).finally(() => {
						this.loading = false;
					})
				})
			}
		}
	}
</script>

<style scoped>
	/* https://www.zxlee.cn/github/uni-z-paging/phone.png */
</style>
